import React, {useCallback, useEffect} from 'react';
import {
  Text,
  View,
  StyleSheet,
  TouchableHighlight,
  TouchableWithoutFeedback,
  NativeModules,
} from 'react-native';
import {useDispatch, useSelector} from 'react-redux';
import {useNavigation} from '@react-navigation/native';
import {langConfig} from '../../../i18n';
import PatIcon from '../../../component/base/PatIcon';
import Colors from '../../../utils/Colors';
import {useTrackData} from '../../../mixins';
import SettingTop from '../../../component/account/setting/SettingTop';
import {useTranslation} from 'react-i18next';
const HEIGHT = NativeModules.StatusBarManager.HEIGHT;

const SetLang = props => {
  const {t} = useTranslation();
  const dispatch = useDispatch();
  const langCode = useSelector(state => state.common.langCode);
  const country = useSelector(state => state.common.country);
  const currencyCode = useSelector(state => state.common.currencyCode);
  const navigation = useNavigation();
  const onChange = useCallback(
    type => () => {
      switch (type) {
        case 'country':
          console.log('去设置国家');
          return false;
        case 'lang':
          navigation.navigate('setLang-root');
          return false;
        case 'currencyCode':
          console.log('currencyCode');
          return false;
        case 'privacy':
          console.log('privacy');
          return false;
        case 'logOut':
          console.log('logOut');
          dispatch({type: 'user/logOut'});
          navigation.goBack();
          return false;
      }
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [],
  );
  useTrackData();
  return (
    <View style={styles.container}>
      <SettingTop title={t('setting.setting')} />
      <TouchableHighlight
        activeOpacity={0.8}
        underlayColor={Colors.white}
        onPress={onChange('country')}
        style={styles.langItem}>
        <View style={styles.langItemView}>
          <Text>{t('common.country')}</Text>
          <Text style={{color: Colors.patFontGray2}}>{country}</Text>
        </View>
      </TouchableHighlight>
      <TouchableHighlight
        activeOpacity={0.8}
        underlayColor={Colors.white}
        onPress={onChange('lang')}
        style={styles.langItem}>
        <View style={styles.langItemView}>
          <Text>{t('common.lang')}</Text>
          <Text style={{color: Colors.patFontGray2}}>{langCode}</Text>
        </View>
      </TouchableHighlight>
      <TouchableHighlight
        activeOpacity={0.8}
        underlayColor={Colors.white}
        onPress={onChange('currencyCode')}
        style={styles.langItem}>
        <View style={styles.langItemView}>
          <Text>{t('common.currencyCode')}</Text>
          <Text style={{color: Colors.patFontGray2}}>{currencyCode}</Text>
        </View>
      </TouchableHighlight>
      <TouchableHighlight
        activeOpacity={0.8}
        underlayColor={Colors.white}
        onPress={onChange('privacy')}
        style={styles.langItem}>
        <View style={styles.langItemView}>
          <Text>{t('privacy.index')}</Text>
        </View>
      </TouchableHighlight>
      <TouchableHighlight
        activeOpacity={0.8}
        underlayColor={Colors.white}
        onPress={onChange('logOut')}
        style={styles.langItem}>
        <View style={styles.logOut}>
          <Text style={{color: Colors.patFontRed}}>
            {t('account.login_out')}
          </Text>
        </View>
      </TouchableHighlight>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: HEIGHT + 40,
    backgroundColor: '#ecf0f1',
  },
  langItem: {
    marginTop: 10,
    backgroundColor: Colors.white,
    height: 30,
    width: '100%',
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    flexDirection: 'row',
    paddingLeft: 15,
    paddingRight: 15,
  },
  langItemView: {
    height: 30,
    width: '100%',
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    flexDirection: 'row',
  },
  logOut: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    width: '100%',
  },
});

export default SetLang;
